<template>
  <div>
    <div class="gmqm_cont">
      <!-- <Den></Den> -->
      <div class="gmqm_cont_box">
       
        <table   border="1" style="width:50%">
             <thead>
                  <th>线体</th>
                  <th>设备</th>
                  <th>腔体</th>
                  <th>片数</th>
             </thead>
              <tbody>
                    <tr v-for="(item,index) in list" :key="index">
                           <th>
                             {{item.line}}
                               <tr v-for="(con,ind) in item.facility" :key="ind">
                                    <td>{{con.order}}</td>
                               </tr>
                           </th>
                    </tr>
              </tbody>
        </table>

        

        <!-- <el-table
          :data="items"
          border
          :span-method="objectSpanMethod"
          style="width: 100%"
        > -->
         <!-- <el-table-column prop="line" label="线体" width="80">
          </el-table-column>
          <el-table-column prop="onder" label="设备" width="80">
          </el-table-column>
          <el-table-column prop="sepm" label="腔体" width="100">
          </el-table-column>
          <el-table-column prop="val" label="数值" width="100">
          </el-table-column> -->
          <!-- <el-table-column label="比例">
                <template slot-scope="scope">
                      {{ labelecharts(scope.row, scope.$index) }}
                      <div :id="`laber-item` + scope.$index" :style="{width: '705px', height: '70px'}"></div>
                </template>
          </el-table-column> -->
          <!-- <el-table-column label="比例"> 
            <template slot-scope="scope">
              <el-progress
                :stroke-width="20"
                 :text-inside="true"
                :format="_format(scope.row.average)"
                :percentage="scope.row.average"
              ></el-progress>

            </template>
          </el-table-column>
        </el-table> -->
      </div>
    </div>



    <!-- <el-container>
      <el-header><ren1></ren1></el-header>
        <el-row :gutter="10">
            <el-container>
              <el-aside width="200px"><ren2></ren2></el-aside>
              <el-main><ren3></ren3></el-main>
            </el-container>
        </el-row>
    </el-container> -->

    <!-- <el-container>
      <el-aside width="200px"><ren2></ren2></el-aside>
      <el-container>
        <el-header><ren1></ren1></el-header>
        <el-main><ren3></ren3></el-main>
      </el-container>
    </el-container> -->

    <!-- <el-footer>Footer</el-footer> -->

    <!-- <div id="ren-item"></div>
          <div id="query_cont"></div>
          <div @click="click">模拟请求数据按钮</div>
          <div>{{ this.string }}</div>
          <div id="my_echrts"></div>

          <div id="my_defect"></div>

          <div>
            <a
              href="mailto:112986732@qq.com?subject=test&cc=sample@hotmail.com&subject=主题&body=内容"
              >send mail</a
            >
          </div> -->
    <!-- <div class="edit_container" style="height: 100px">
            <quill-editor
              v-model="content"
              ref="myQuillEditor"
              :options="editorOption"
              @blur="onEditorBlur($event)"
              @focus="onEditorFocus($event)"
              @change="onEditorChange($event)"
            >
            </quill-editor>
          </div> -->
  </div>
</template>
<script>
// import  Den from '../../../components/download/Download'
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";
// import { quillEditor } from "vue-quill-editor"; //调用编辑器
// import "quill/dist/quill.core.css";
// import "quill/dist/quill.snow.css";
// import "quill/dist/quill.bubble.css";
// import {onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,onErrorCaptured} from '@vue/composition-api'
// import ren1 from "./Ren1";
// import ren2 from "./Ren2";
// import ren3 from "./Ren3";
export default {
  // setup(){
  //     onBeforeMount(()=>{
  //         console.log('onBeforeMount,挂载前')
  //     }),
  //     onMounted(()=>{
  //         console.log('onMounted,挂在后')
  //     }),
  //     onBeforeUpdate(()=>{
  //         console.log('onBeforeUpdate,更新前 ')
  //     }),
  //     onUpdated(()=>{
  //         console.log('onBeforeUpdate,更新后')
  //     }),
  //     onBeforeUnmount(()=>{
  //         console.log('onBeforeUpdate,实例销毁之前')
  //     })
  //     onUnmounted(()=>{
  //          console.log('onUnmounted,实例销毁之后')
  //     })
  //     onErrorCaptured(()=>{
  //         console.log('onUnmounted,谁能告诉我这是干嘛的');
  //     })
  // },

  components: {
    // Den
    // ren1,
    // ren2,
    // ren3,
    // quillEditor,
  },
  data() {
    return {
      rowspan: 10,
      border: 1,
      content: `<p></p><p><br></p><ol><li><strong><em>Or drag/paste an image here.</em></strong></li><li><strong><em>rerew</em></strong></li><li><strong><em>rtrete</em></strong></li><li><strong><em>tytrytr</em></strong></li><li><strong><em>uytu</em></strong></li></ol>`,
      //  content:'',
      editorOption: {},
      item: "oooo",
      nameList: [
        "赵",
        "钱",
        "孙",
        "李",
        "周",
        "吴",
        "郑",
        "王",
        "冯",
        "陈",
        "褚",
        "卫",
        "蒋",
        "沈",
        "韩",
        "杨",
        "朱",
        "秦",
        "尤",
        "许",
        "何",
        "吕",
        "施",
        "张",
        "孔",
        "曹",
        "严",
        "华",
        "金",
        "魏",
        "陶",
        "姜",
        "戚",
        "谢",
        "邹",
        "喻",
        "柏",
        "水",
        "窦",
        "章",
        "云",
        "苏",
        "潘",
        "葛",
        "奚",
        "范",
        "彭",
        "郎",
        "鲁",
        "韦",
        "昌",
        "马",
        "苗",
        "凤",
        "花",
        "方",
        "俞",
        "任",
        "袁",
        "柳",
        "酆",
        "鲍",
        "史",
        "唐",
        "费",
        "廉",
        "岑",
        "薛",
        "雷",
        "贺",
        "倪",
        "汤",
        "滕",
        "殷",
        "罗",
        "毕",
        "郝",
        "邬",
        "安",
        "常",
        "乐",
        "于",
        "时",
        "傅",
        "皮",
        "卞",
        "齐",
        "康",
        "伍",
        "余",
        "元",
        "卜",
        "顾",
        "孟",
        "平",
        "黄",
        "和",
        "穆",
        "萧",
        "尹",
        "姚",
        "邵",
        "湛",
        "汪",
        "祁",
        "毛",
        "禹",
        "狄",
        "米",
        "贝",
        "明",
        "臧",
        "计",
        "伏",
        "成",
        "戴",
        "谈",
        "宋",
        "茅",
        "庞",
        "熊",
        "纪",
        "舒",
        "屈",
        "项",
        "祝",
        "董",
        "梁",
        "杜",
        "阮",
        "蓝",
        "闵",
        "席",
        "季",
        "麻",
        "强",
        "贾",
        "路",
        "娄",
        "危",
      ],
      inYield: {
        day: [
          {
            day_1: 721,
            day_1_date: "2020/12/14",
            day_2: 721,
            day_2_date: "2020/12/15",
            day_3: 721,
            day_3_date: "2020/12/16",
            day_4: 721,
            day_4_date: "2020/12/17",
            day_5: 0,
            day_5_date: "2020/12/18",
            day_6: 0,
            day_6_date: "2020/12/19",
            day_7: 0,
            day_7_date: "2020/12/20",
            name: "BlackDot",
          },
          {
            day_1: 4,
            day_1_date: "2020/12/14",
            day_2: 4,
            day_2_date: "2020/12/15",
            day_3: 4,
            day_3_date: "2020/12/16",
            day_4: 4,
            day_4_date: "2020/12/17",
            day_5: 0,
            day_5_date: "2020/12/18",
            day_6: 0,
            day_6_date: "2020/12/19",
            day_7: 0,
            day_7_date: "2020/12/20",
            name: "Block",
          },
          {
            day_1: 968,
            day_1_date: "2020/12/14",
            day_2: 968,
            day_2_date: "2020/12/15",
            day_3: 968,
            day_3_date: "2020/12/16",
            day_4: 968,
            day_4_date: "2020/12/17",
            day_5: 0,
            day_5_date: "2020/12/18",
            day_6: 0,
            day_6_date: "2020/12/19",
            day_7: 0,
            day_7_date: "2020/12/20",
            name: "BrightDot",
          },
          {
            day_1: 26,
            day_1_date: "2020/12/14",
            day_2: 26,
            day_2_date: "2020/12/15",
            day_3: 26,
            day_3_date: "2020/12/16",
            day_4: 26,
            day_4_date: "2020/12/17",
            day_5: 0,
            day_5_date: "2020/12/18",
            day_6: 0,
            day_6_date: "2020/12/19",
            day_7: 0,
            day_7_date: "2020/12/20",
            name: "Line",
          },
          {
            day_1: 337,
            day_1_date: "2020/12/14",
            day_2: 337,
            day_2_date: "2020/12/15",
            day_3: 337,
            day_3_date: "2020/12/16",
            day_4: 337,
            day_4_date: "2020/12/17",
            day_5: 0,
            day_5_date: "2020/12/18",
            day_6: 0,
            day_6_date: "2020/12/19",
            day_7: 0,
            day_7_date: "2020/12/20",
            name: "Mura",
          },
          {
            day_1: 2056,
            day_1_date: "2020/12/14",
            day_2: 2056,
            day_2_date: "2020/12/15",
            day_3: 2056,
            day_3_date: "2020/12/16",
            day_4: 2056,
            day_4_date: "2020/12/17",
            day_5: 0,
            day_5_date: "2020/12/18",
            day_6: 0,
            day_6_date: "2020/12/19",
            day_7: 0,
            day_7_date: "2020/12/20",
            name: "total",
          },
        ],
        month: [
          {
            month_1: 0,
            month_1_date: "2020/10",
            month_2: 0,
            month_2_date: "2020/11",
            month_3: 10094,
            month_3_date: "2020/12",
            name: "BlackDot",
          },
          {
            month_1: 0,
            month_1_date: "2020/10",
            month_2: 0,
            month_2_date: "2020/11",
            month_3: 56,
            month_3_date: "2020/12",
            name: "Block",
          },
          {
            month_1: 0,
            month_1_date: "2020/10",
            month_2: 0,
            month_2_date: "2020/11",
            month_3: 13552,
            month_3_date: "2020/12",
            name: "BrightDot",
          },
          {
            month_1: 0,
            month_1_date: "2020/10",
            month_2: 0,
            month_2_date: "2020/11",
            month_3: 364,
            month_3_date: "2020/12",
            name: "Line",
          },
          {
            month_1: 0,
            month_1_date: "2020/10",
            month_2: 0,
            month_2_date: "2020/11",
            month_3: 4718,
            month_3_date: "2020/12",
            name: "Mura",
          },
          {
            month_1: 0,
            month_1_date: "2020/10",
            month_2: 0,
            month_2_date: "2020/11",
            month_3: 28784,
            month_3_date: "2020/12",
            name: "total",
          },
        ],
        quarter: [
          {
            name: "BlackDot",
            quarter_1: 0,
            quarter_1_date: "2020/3",
            quarter_2: 10094,
            quarter_2_date: "2020/4",
          },
          {
            name: "Block",
            quarter_1: 0,
            quarter_1_date: "2020/3",
            quarter_2: 56,
            quarter_2_date: "2020/4",
          },
          {
            name: "BrightDot",
            quarter_1: 0,
            quarter_1_date: "2020/3",
            quarter_2: 13552,
            quarter_2_date: "2020/4",
          },
          {
            name: "Line",
            quarter_1: 0,
            quarter_1_date: "2020/3",
            quarter_2: 364,
            quarter_2_date: "2020/4",
          },
          {
            name: "Mura",
            quarter_1: 0,
            quarter_1_date: "2020/3",
            quarter_2: 4718,
            quarter_2_date: "2020/4",
          },
          {
            name: "total",
            quarter_1: 0,
            quarter_1_date: "2020/3",
            quarter_2: 28784,
            quarter_2_date: "2020/4",
          },
        ],
        week: [
          {
            name: "BlackDot",
            week_1: 0,
            week_1_date: "2020/47",
            week_2: 2884,
            week_2_date: "2020/48",
            week_3: 2884,
            week_3_date: "2020/49",
            week_4: 2884,
            week_4_date: "2020/50",
          },
          {
            name: "Block",
            week_1: 0,
            week_1_date: "2020/47",
            week_2: 16,
            week_2_date: "2020/48",
            week_3: 16,
            week_3_date: "2020/49",
            week_4: 16,
            week_4_date: "2020/50",
          },
          {
            name: "BrightDot",
            week_1: 0,
            week_1_date: "2020/47",
            week_2: 3872,
            week_2_date: "2020/48",
            week_3: 3872,
            week_3_date: "2020/49",
            week_4: 3872,
            week_4_date: "2020/50",
          },
          {
            name: "Line",
            week_1: 0,
            week_1_date: "2020/47",
            week_2: 104,
            week_2_date: "2020/48",
            week_3: 104,
            week_3_date: "2020/49",
            week_4: 104,
            week_4_date: "2020/50",
          },
          {
            name: "Mura",
            week_1: 0,
            week_1_date: "2020/47",
            week_2: 1348,
            week_2_date: "2020/48",
            week_3: 1348,
            week_3_date: "2020/49",
            week_4: 1348,
            week_4_date: "2020/50",
          },
          {
            name: "total",
            week_1: 0,
            week_1_date: "2020/47",
            week_2: 8224,
            week_2_date: "2020/48",
            week_3: 8224,
            week_3_date: "2020/49",
            week_4: 8224,
            week_4_date: "2020/50",
          },
        ],
        year: [
          {
            name: "BlackDot",
            year_1: 10094,
            year_1_date: "2020",
          },
          {
            name: "Block",
            year_1: 56,
            year_1_date: "2020",
          },
          {
            name: "BrightDot",
            year_1: 13552,
            year_1_date: "2020",
          },
          {
            name: "Line",
            year_1: 364,
            year_1_date: "2020",
          },
          {
            name: "Mura",
            year_1: 4718,
            year_1_date: "2020",
          },
          {
            name: "total",
            year_1: 28784,
            year_1_date: "2020",
          },
        ],
      },
      items: [
        {
          line:'lin1',
          onder: "AFI",
          sepm: "BFOF11",
          val: 23,
        },
        {
          line:'lin1',
          onder: "AFI",
          sepm: "BFOF12",
          val: 212,
        },
        {
          line:'lin1',
          onder: "AFI",
          sepm: "BFOF13",
          val: 523,
        },
        {
          line:'lin1',
          onder: "AFI",
          sepm: "BFOF14",
          val: 1125,
        },
        {
          line:'lin1',
          onder: "AFI",
          sepm: "BFOF16",
          val: 8825,
        },
        {
          line:'lin1',
          onder: "AFI",
          sepm: "BFOF17",
          val: 26,
        },
        {
          line:'lin2',
          onder: "ABI",
          sepm: "BFOF11",
          val: 20,
        },
        {
           line:'lin2',
          onder: "ABI",
          sepm: "BFOF12",
          val: 22,
        },
        {
           line:'lin2',
          onder: "ABI",
          sepm: "BFOF13",
          val: 24,
        },
        {
           line:'lin2',
          onder: "A0I",
          sepm: "BFOF13",
          val: 27,
        },
        {
           line:'lin2',
          onder: "A0I",
          sepm: "BFOF12",
          val: 22,
        },
        {
          line:'lin2',
          onder: "A0I",
          sepm: "BFOF13",
          val: 24,
        },
        {
           line:'lin2',
          onder: "A0I",
          sepm: "BFOF13",
          val: 27,
        },
      ],
      list:[
        {
          line:'lin1',
           facility:[
            {
              order:"ABI",
              step:[
                {
                  site:"BOF-010",
                  val:20
                }
              ]
            },
            {
              order:'AFI',
              step:[
                 {
                  site:"BOF-011",
                  val:24
                }
              ]
            }
          ]
        },
          {
          line:'lin2',
           facility:[
            {
              order:"ABI2",
              step:[
                {
                  site:"BOF-0102",
                  val:25
                }
              ]
            },
            {
              order:'AFI2',
              step:[
                 {
                  site:"BOF-0112",
                  val:29
                }
              ]
            }
          ]
        }
      ],
      isCollapse: true,
      listtable: [],
      tabledata: [],
      formInline: {
        recipe: "VR2-1-24",
        line: "3",
        site: "",
        order: "66",
        encoder: "",
        pannalid: "44-9742282B1099C0EZEA1BC1J8190",
      },
      str: "",
      string: "",
      title: ["1", "2", "3", "4", "5", "6", "7", "8", "9"],
    };
  },
  mounted() {
    this.gettser()
    console.log(this.list)
    var obj = {}
    var temp  = []
    for(let i=0;i<this.list.length;i++){
      // console.log(this.list[i])
       obj = {
        line:this.list[i].line,
      }
      for(let j=0;j<this.list[i].facility.length;j++){
        // console.log('22222222222',this.list[i].facility[j]);
           obj = {
            line:this.list[i].line,
            order:this.list[i].facility[j].order
          }
          for(let k=0;k<this.list[i].facility[j].step.length;k++){
              obj = {
                line:this.list[i].line,
                order:this.list[i].facility[j].order,
                site:this.list[i].facility[j].step[k].site,
                val:this.list[i].facility[j].step[k].val
              }
          }
      }
      temp.push(obj)
    }
     console.log(temp)






    var Uid = "c25246ebw18f9w4e45w90b3w6888924542f4";
    var url = `rtable/rk?page=1&cpp=50`;
    var besurl = url.replace("rk", Uid);
    this.ajax({
      url: besurl,
      method: "GET",
    }).then((res) => {
      this.tabledata = res.data;
      // console.log(this.tabledata);
    });

    // this.mychrets();
    // console.log("2.0,挂载阶段");
    // this.cherst();
    // this.querycont();
    // this.onclick();
    // var con = this.tableitms;
    // //  console.log(con);
    // this.Setrecursive(con);
    // this.my_echtrscont();
    // console.log('模拟缺陷数据',this.defectNum)
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
  },

  methods: {
     gettser(){
       var arr =[];
       for(let i=0;i<this.items.length;i++){
          arr.push(this.items[i].val)
       }
      var manval = Math.max(...arr)
       this.items.forEach((ele)=>{
         var average = ele.val/manval*100;
         var  num = average.toFixed(2);
         ele.average = Number(num)
         
       })
        //  console.log('////////////',this.items)
     },




    _format(value){
        return ()=>{
          return value+'%'
        }
    },


    flitterData(arr) {
      let spanOneArr = [];
      let sapnTwoArr = [];
      let concatOne = 0;
      let concatTwo = 0;
      arr.forEach((item, index) => {
        if (index === 0) {
          spanOneArr.push(1);
          sapnTwoArr.push(1)
        } else {
          //name 修改
          if (item.line === arr[index - 1].line) {
            //第一列需合并相同内容的判断条件
            spanOneArr[concatOne] += 1;
            spanOneArr.push(0);
          } else {
            spanOneArr.push(1);
            concatOne = index;
          }

          if(item.onder === arr[index - 1].onder){
             sapnTwoArr[concatTwo]+=1;
             sapnTwoArr.push(0);
          }else{
             sapnTwoArr.push(1);
             concatTwo = index;
          }
        }
      });
      return {
        one: spanOneArr,
        two:sapnTwoArr
      };
    },

    objectSpanMethod({ rowIndex, columnIndex }) {
       
      if (columnIndex === 0) {
        // this.tableData  修改
        const _row = this.flitterData(this.items).one[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }

      if(columnIndex === 1){
          const _row = this.flitterData(this.items).two[rowIndex];
          const _col = _row > 0 ? 1 : 0;
           return {
            rowspan: _row,
            colspan: _col,
          };
      }
    },


    labelecharts(item,index){
       let list = [];
       list.push(item.val)
       console.log(list)
     var option = {
            xAxis: {
                type: 'category',
                data: ['Mon']
            },
            yAxis: {
                type: 'value'
            },
            series: [
              {
                name:"",
                type: 'bar',
                data:list,
                label:{
                  show:true
                }
              }
            ]
        };
        this.$nextTick(()=>{
           let my_sol = this.$echarts.init(document.getElementById('laber-item'+index));
           my_sol.setOption(option)
        })

    },

    //  objectSpanMethod({row,colunm,rowIndex,colunmIndex}){
    //      if(colunmIndex === 0){

    //      }
    //  },

    cickon() {
      if (this.isCollapse == false) {
        this.isCollapse = true;
      } else if (this.isCollapse == true) {
        this.isCollapse = false;
      }
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    onEditorReady(editor) {
      // 准备编辑器
      console.log("准备编辑器", editor);
    },
    onEditorBlur(editor) {
      // 失去焦点事件
      console.log("获得焦点事件", editor);
    },
    onEditorFocus(editor) {
      // 获得焦点事件
      console.log("获得焦点事件", editor);
    },
    onEditorChange({ editor, html, text }) {
      console.log("11111111111", editor);
      console.log("22222222222", html);
      console.log("33333333333", text); // 内容改变事
      console.log("内容改变事", this.content);
    },

    cherst() {
      let my_chets = this.$echarts.init(document.getElementById("ren-item"));
      var data = this.genData(50);
      var option = {
        title: {
          text: "同名数量统计",
          subtext: "纯属虚构",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          type: "scroll",
          // orient: "vertical",
          right: 10,
          top: 20,
          bottom: 20,
          x: "10%",
          y: "20%",
          data: data.legendData,
          selected: data.selected,
        },
        series: [
          {
            name: "姓名",
            type: "pie",
            radius: "55%",
            center: ["40%", "50%"],
            data: data.seriesData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      my_chets.setOption(option);
    },

    genData(count) {
      var legendData = [];
      var seriesData = [];
      for (var i = 0; i < count; i++) {
        var name =
          Math.random() > 0.65
            ? this.makeWord(4, 1) + "·" + this.makeWord(3, 0)
            : this.makeWord(2, 1);
        legendData.push(name);
        seriesData.push({
          name: name,
          value: Math.round(Math.random() * 100000),
        });
      }
      return {
        legendData: legendData,
        seriesData: seriesData,
      };
    },

    makeWord(max, min) {
      var nameLen = Math.ceil(Math.random() * max + min);
      var name = [];
      for (var i = 0; i < nameLen; i++) {
        name.push(
          this.nameList[Math.round(Math.random() * this.nameList.length - 1)]
        );
      }
      return name.join("");
    },

    querycont() {
      let querychts = this.$echarts.init(document.getElementById("query_cont"));
      var data = this.items.map(function (item) {
        //  console.log('-----------------',item[0], item[1], item[2],item[3],item[4],item[5] )
        return [item[1], item[0], item[2], item[3] || "-"];
      });
      // console.log(data);
      var option = {
        tooltip: {
          position: "right",
        },
        grid: {
          height: "80%",
          top: "10%",
        },
        xAxis: {
          type: "category",
          data: this.hours,
          splitArea: {
            show: true,
          },
        },
        yAxis: {
          type: "category",
          data: this.days,
          splitArea: {
            show: true,
          },
        },
        visualMap: {
          min: 1,
          max: 50,
          calculable: true,
          orient: "horizontal",
          left: "center",
          bottom: "-5%",
        },
        series: [
          {
            name: "Punch Card",
            type: "heatmap",
            data: data,
            label: {
              show: true,
              // formatter: function (params) {
              // var  temp = []
              //   if (params.data) {
              //     temp.push(params.data)
              //     console.log(temp)
              //      return  temp;
              //   }
              // },
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      querychts.setOption(option);
    },

    click() {
      this.ajax({
        url: `http://10.92.162.189:8181/v1/prod/ID000001?code1=${this.formInline.recipe}&code2=${this.formInline.pannalid}`,
        method: "GET",
      }).then((res) => {
        console.log(res.data);
      });
    },

    onclick() {
      // var temp = [];
      var a = 0;
      var b = "code";
      for (let key in this.formInline) {
        a++;
        var z = b + a;
        var ion = `${z}=${this.formInline[key]}`;
        //  temp.push(ion)
        return ion;
      }
    },

    calleArr(arr) {
      for (var i = 0; i < arr.length; i++) {
        var data = arr[i];
        if (data.children) {
          //是否还有下级
          data.name = data.name + "--name1";
          this.calleArr(data.children); //自己调用自己
        } else {
          data.name = data.name + "--最后一个";
        }
      }
      // console.log(arr, "arr============");
    },

    Setrecursive(con) {
      //递归函数
      // console.log(con);
      con.forEach((element) => {
        if (element.children) {
          // console.log('1111111111111',element.children)
          this.Setrecursive(element.children);
        } else {
          this.string += element.org_name + ";";
        }
      });
      // console.log("==============", this.string);
    },
  },
};
</script>

<style  scoped>
#ren-item {
  width: 100%;
  height: 400px;
}
#query_cont {
  width: 500px;
  height: 400px;
  margin: 0 auto;
}
.quill-editor {
  height: 350px;
}

#my_echrts {
  width: 100%;
  height: 400px;
}
#my_defect {
  width: 100%;
  height: 400px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.gmqm_cont {
  width: 100%;
  height: 100%;

  /* border:1px solid red;  */
  /*第一种 */
  /* text-align:center;       */

  /*第二种弹性盒子*/
  /* display:flex;                   
   justify-content: center;
   align-items: center;  */
  /* position: relative; */
}

.gmqm_cont_box {
  width: 100%;
  /* height: 80vh; */
  border: 1px solid blue;
  /* transform:rotate(19deg);
  -webkit-transform:rotate(-90deg); */

  /* margin:6% auto;   */

  /* 第一种 */
  /* display: inline-block;   */

  /* 第三种 */
  /* position: absolute; 
      top: 0; 
      bottom:0; 
      left: 0; right:0;
      margin: auto */

  /* position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto; */
}

.laber-item
{
  width:100px;
  height:40px;
  border:1px solid #000
}
.tiger-trend-charts
{
  height:60px;
  min-width:200px;
}

</style>